<template>
    <div class="userConcerns-container">
      <div class="userConcerns-container-item boederSet">
        <div class="titleHeader">
          用户关注点
        </div>
        <div class="dataContainer">
          <div class="dataContainer-item">
            <div class="dataContainer-item-container" style="width: 100%;">
              <div id="echartsOptionsLeft" style="width: 100%;height: 300px;"></div>
            </div>
            <div class="echartsOptionsLeft echartsTitle">{{`${brandName}/${productCode}`}}</div>
          </div>
          <div class="dataContainer-item">
            <div class="dataContainer-item-container" style="width: 100%;">
              <div id="echartsOptionsRight" style="width: 100%;height: 300px;"></div>
            </div>
            <div class="echartsOptionsRight echartsTitle">{{category}}</div>
          </div>
        </div>
      </div>
      <div class="userConcerns-container-item boederSet" style="margin-top: 12px">
        <el-table
          :data="userConcernsData"
          stripe
          style="width: 100%">
          <el-table-column
            prop="userFocus"
            label="用户关注点"
            width="180">
          </el-table-column>
          <el-table-column
            prop="category"
            label="品类市场关注点提及率（%）"
            >
          </el-table-column>
          <el-table-column
            prop="productCode"
            label="产品关注点提及率（%）">
          </el-table-column>
          <el-table-column
            prop="contrastDifference"
            label="对比差值（%）"
            width="180">
          </el-table-column>
          <el-table-column
            prop="salesCount"
            label="销额（万元）">
          </el-table-column>
        </el-table>
      </div>
    </div>
</template>

<script>
  import * as opreator from 'api/getData'
  export default {
      name: "user-concerns",
      props:{
        userConcernsData: {
          type: Array,
          default: []
        },
        productCode:''
      },
      data() {
          return {
            echartsOptionsLeft:{},
            echartsOptionsRight:{},
            echartsOptions:{
              tooltip : {
                trigger: 'axis',
                axisPointer : {
                  type : 'shadow'
                }
              },
              legend: {
                data:['正面', '负面']
              },
              grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
              },
              xAxis : [
                {
                  type : 'value'
                }
              ],
              yAxis : [
                {
                  type : 'category',
                  axisTick : {show: false},
                  data : []
                }
              ],
              series : [

                {
                  name:'正面',
                  type:'bar',
                  stack: '总量',
                  label: {
                    normal: {
                      show: true
                    }
                  },
                  data:[]
                },
                {
                  name:'负面',
                  type:'bar',
                  stack: '总量',
                  label: {
                    normal: {
                      show: true,
                      position: 'left'
                    }
                  },
                  data:[]
                }
              ]
            },
            brandName:'',
            category:''
          }
      },
      mounted() {
        this.initStateCharts()
      },
      methods: {
        initStateCharts(){
            opreator.userBrandProduct({ productCode:this.productCode }).then(res => {
              let tempSet = res.data[0][0]
              if(tempSet){
                this.brandName = tempSet.brandName
                this.echartsOptionsLeft = {
                  tooltip : {
                    trigger: 'axis'
                  },
                  legend: {
                    data:['负面','正面']
                  },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis : [
                    {
                      type : 'value'
                    }
                  ],
                  yAxis : [
                    {
                      type : 'category',
                      axisTick : {show: false},
                      data : res.data[0].map(item => item.description)
                    }
                  ],
                  series : [
                    {
                      name:'正面',
                      type:'bar',
                      stack: '总量',
                      label: {
                        normal: {
                          show: true
                        }
                      },
                      barMaxWidth: '30px',
                      data:res.data[1].map(item => item.num)
                    },
                    {
                      name:'负面',
                      type:'bar',
                      stack: '总量',
                      label: {
                        normal: {
                          show: false,
                          position: 'left'
                        }
                      },
                      barMaxWidth: '30px',
                      data:res.data[0].map(item => -item.num)
                    }
                  ]
                }
                let setChartLeft = this.$echarts.init(document.getElementById('echartsOptionsLeft'))
                setChartLeft.setOption(this.echartsOptionsLeft)
              }
            })
            opreator.userCategoryProduct({ productCode:this.productCode }).then(res => {
              let tempSet = res.data[0][0]
              if(tempSet){
                this.category = tempSet.categoryName
                this.echartsOptionsRight = {
                  tooltip : {
                    trigger: 'axis'
                  },
                  legend: {
                    data:['负面','正面']
                  },
                  grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                  },
                  xAxis : [
                    {
                      type : 'value'
                    }
                  ],
                  yAxis : [
                    {
                      type : 'category',
                      axisTick : {show: false},
                      data : res.data[0].map(item => item.description)
                    }
                  ],
                  series : [
                    {
                      name:'正面',
                      type:'bar',
                      stack: '总量',
                      label: {
                        normal: {
                          show: true
                        }
                      },
                      barMaxWidth: '30px',
                      data:res.data[1].map(item => item.num)
                    },
                    {
                      name:'负面',
                      type:'bar',
                      stack: '总量',
                      label: {
                        normal: {
                          show: false,
                          position: 'left'
                        }
                      },
                      barMaxWidth: '30px',
                      data:res.data[0].map(item => -item.num)
                    }
                  ]
                }
                let setChartRight = this.$echarts.init(document.getElementById('echartsOptionsRight'))
                setChartRight.setOption(this.echartsOptionsRight)
              }
            })
        }
      }
  }
</script>

<style scoped>
  .userConcerns-container{
    display: flex;
    flex-direction: column;
  }
  .dataContainer{
    display: flex;
  }
  .titleHeader{
    font-weight: bold;
  }
  .dataContainer-item{
    display: flex;
    flex: 1;
    padding: 12px;
  }
  .dataContainer-item{
    display: flex;
    flex-direction: column;
  }
  .echartsTitle{
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
